<template>
  <nav class="nav-bar">
    <div class="btn" v-for="(nav, i) in navs" :key="i">
      <span v-if="nav.hasChild">{{ nav.name }}</span>
      <!-- <span v-else @click="changePage(nav.page)">{{ nav.name }}</span> -->
      <RouterLink v-else :to="nav.page" custom #default="{ navigate, }">
        <span @click="navigate" >{{ nav.name }}</span>
      </RouterLink>
      <div class="btn-items-box" v-if="nav.hasChild">
        <ul class="btn-items">
          <!-- <li v-for="(item, i) in nav.children" :key="i" @click="changePage(item.page)">{{ item.name }}</li> -->
          <RouterLink v-for="(item, i) in nav.children" :to="item.page" custom #default="{ navigate, isActive, isExactActive }" :key="i">
            <li @click="navigate" :class="{ 'nav-active': isActive, 'nav-exact-active': isExactActive }">{{ item.name }}{{ isActive }}{{ isExactActive }}</li>
          </RouterLink>

        </ul>
      </div>

    </div>

  </nav>
  <div>
    <RouterView></RouterView>

  </div>
  <HomeBtn v-show="!$route.meta.isHide"></HomeBtn>
</template>
<script>


import HomeBtn from '../index/components/HomeBtn.vue'
export default {
  name: 'App',
  // components: {
  //   DefaultPage,
  //   singBa, ErrorPage,
  //   AssetsPage1, AssetsBuildPage1,
  //   DeepStyle1, GloaborPart1,
  //   SassPage1,
  //   BulidProject1,
  //   AxiosPage,
  //   InterceptorsAxios1,
  //   AxiosModel,
  //   AjaxProxy,
  //   CompstionPage,
  //   compoentPage,
  //   LifePage,
  //   ThisPage


  // },
  components:{
    HomeBtn
  },
  data() {
    return {
      page: "DefaultPage",
      navs: [
        { name: "默认页", hasChild: false, page: "DefaultPage" },
        {
          name: "启动过程", hasChild: true, children: [
            { name: "单文件组件-简单结构", page: "A" },
            { name: "单文件组件-注意事项", page: "singBa" },

          ]
        },
        {
          name: "错误处理和静态资源", hasChild: true, children: [
            { name: "错误处理", page: "ErrorPage" },
            { name: "静态资源", page: "AssetsPage1" },
            { name: '资源编译', page: "AssetsBuildPage1" }
          ]
        },
        {
          name: "样式操作", hasChild: true, children: [
            { name: "全局样式和局部样式", page: "GloaborPart1" },
            { name: "样式穿透", page: "DeepStyle1" },
            { name: "动态样式", page: "SassPage1" },
          ]
        },
        { name: "项目打包", hasChild: false, page: "BulidProject1" },
        {
          name: "异步请求", hasChild: true, children: [
            { name: "axios的基本使用", page: "AxiosPage" },
            { name: "axios的拦截器使用", page: "InterceptorsAxios1" },
            { name: "axios的模块化", page: "AxiosModel" },
            { name: "开发代理服务器设置", page: "AjaxProxy" },
          ]
        },
        {
          name: "组合式API", hasChild: true, children: [
            { name: "基本语法定义", hasChild: false, page: "CompstionPage" },
            { name: "组件语法定义", hasChild: false, page: "compoentPage" },
            { name: "组合式语法定义", hasChild: false, page: "LifePage" },
            { name: "组合式API实例调用", hasChild: false, page: "ThisPage" },
          ]
        },
        {
          name: "路由", hasChild: true, children: [
            { name: "路由的集成和使用", hasChild: false, page: "RouterPage" },
            { name: "路由参数", hasChild: false, page: "ParmasPage" },
          ]
        },
      ]
    }
  },
  // methods: {
  //   changePage(page) {
  //     // console.log(page)
  //     this.page = page;
  //   }
  // },

}
</script>
  
<style>
body {
  margin: 0px;
}
.nav-active{
  color: red;
  
}
.nav-exact-active{
background-color: blue;

}


.nav-bar {
  background-color: #545c64;
  color: #e9ecf4;
  font-size: 0px;
  padding: 0px 60px;
  box-shadow: 0px 0px 4px #6e7276;
}

.nav-bar .btn {
  display: inline-block;
  min-width: 100px;
  text-align: center;
  font-size: 20px;
  margin-right: 30px;
  padding: 20px 0px;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
  border-bottom: 4px solid transparent;
  position: relative;
}

.nav-bar .btn:hover {
  border-color: #f7ca4b;
}

.nav-bar .btn:hover span {
  color: #f7ca4b;
}

.nav-bar .btn:hover .btn-items {
  display: block;
}

.nav-bar .btn .btn-items-box {
  position: absolute;
  padding: 30px 0px 0px 0px;
  transform: translate(40px, 0px);
}

.nav-bar .btn .btn-items {
  /* position: absolute; */
  background-color: #545c64;
  /* transform: translate(40px,24px); */
  margin: 0px;
  padding: 0px;
  list-style: none;
  min-width: 200px;
  text-align: left;
  padding: 10px 0px;
  border-radius: 4px;
  box-shadow: 0px 0px 4px #6e7276;
  display: none;
}

.nav-bar .btn .btn-items li {
  padding: 10px 14px;
  font-size: 16px;
  cursor: pointer;
}

.nav-bar .btn .btn-items li:hover {
  background-color: #434a50;
}
</style>